<template>
  <el-drawer v-model="drawer" size="45%" :with-header="false">
    <el-descriptions title="商品详情" :column="1">
      <el-descriptions-item label="商品名称：">{{ goods.name }}</el-descriptions-item>
      <el-descriptions-item label="所属分类：">{{ goods.subCategoryName }}</el-descriptions-item>
      <el-descriptions-item label="商品spu编码：">{{ goods.spuCode }}</el-descriptions-item>
      <el-descriptions-item label="描述：">{{ goods.desc }}</el-descriptions-item>
      <el-descriptions-item label="价格：">{{ goods.price }}</el-descriptions-item>
      <el-descriptions-item label="原价：">{{ goods.oldPrice }}</el-descriptions-item>
      <el-descriptions-item label="品牌：">{{ goods.brand }}</el-descriptions-item>
      <el-descriptions-item label="图片：">
        <img :src="goods.picture" alt="图片" style="width: 200px; height: 200px"/>
      </el-descriptions-item>
      <el-descriptions-item label="状态：">{{ goods.status === 1 ? '启用' : '启用' }}</el-descriptions-item>
      <el-descriptions-item label="销量：">{{ goods.salesCount }}</el-descriptions-item>
      <el-descriptions-item label="评论总数：">{{ goods.commentCount }}</el-descriptions-item>
      <el-descriptions-item label="更新时间：">{{ goods.updateTime }}</el-descriptions-item>
      <el-descriptions-item
        v-for="spec in goods.specList"
        :label="spec.name + '：'"
        :key="spec.id"
      >
        <span v-for="specValue in spec.specValueList" :key="specValue.id">{{ specValue.name+' ' }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";

const drawer = ref(false);
const goods = ref([]);

const open = (row) => {
  drawer.value = true;
  goods.value = { ...row };
};

defineExpose({
  open,
});
</script>